<template>
  <input type="text" v-model="title" @keyup.enter="add" class="input"/>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Todo } from '../types/todo'
export default defineComponent({
  props: {
    addTodo: {
      type: Function,
      required: true
    }
  },
  setup (props) {
    const title = ref('')

    const add = () => {
      const text = title.value.trim()
      if (!text) return
      const todo: Todo = {
        id: Date.now(),
        title: text,
        isCheck: false
      }
      props.addTodo(todo)
      title.value = ''
    }
    return {
      title,
      add
    }
  }
})
</script>
<style scoped>
input{
  width: 100%;
  height: 44px;
  line-height: 32px;
  box-sizing: border-box;
  font-size: 26px;
}
</style>
